<template>
  <div class="Top">
    <div class="items item-one">
      <div class="item" @click="getCircle('数学')">
        <span class="iconfont icon-shuxue"></span>
        <span>数学</span>
      </div>
      <div class="item" @click="getCircle('英语')">
        <span class="iconfont icon-yingyu"></span>
        <span>英语</span>
      </div>
      <div class="item" @click="getCircle('编程')">
        <span class="iconfont icon-programmingwindo"></span>
        <span>编程</span>
      </div>
    </div>
    <div class="items item-two">
      <div class="item" @click="getCircle('健身')">
        <span class="iconfont icon-jianshen"></span>
        <span>健身</span>
      </div>
      <div class="item" @click="getCircle('时尚')">
        <span class="iconfont icon-maozi"></span>
        <span>时尚</span>
      </div>
      <div class="item" @click="getCircle('影视')">
        <span class="iconfont icon-iconset0128"></span>
        <span>影视</span>
      </div>
    </div>
    <div class="items item-three">
      <div class="item" @click="getCircle('汽车')">
        <span class="iconfont icon-qiche"></span>
        <span>汽车</span>
      </div>
      <div class="item" @click="getCircle('旅行')">
        <span class="iconfont icon-lvxing"></span>
        <span>旅行</span>
      </div>
      <div class="item" @click="getCircle('理财')">
        <span class="iconfont icon-licai"></span>
        <span>理财</span>
      </div>
    </div>
    <div class="items item-four">
      <div class="item" @click="getCircle('体育')">
        <span class="iconfont icon-tiyu"></span>
        <span>体育</span>
      </div>
      <div class="item" @click="getCircle('法律')">
        <span class="iconfont icon-duopingzhongcai"></span>
        <span>法律</span>
      </div>
      <div class="item" @click="getCircle('职场')">
        <span class="iconfont icon-zhichangbagua"></span>
        <span>职场</span>
      </div>
    </div>
    <div class="items item-five">
      <div class="item" @click="getCircle('游戏')">
        <span class="iconfont icon-iconfontyouxihudong"></span>
        <span>游戏</span>
      </div>
      <div class="item" @click="getCircle('科学')">
        <span class="iconfont icon-kexue"></span>
        <span>科学</span>
      </div>
      <div class="item" @click="getCircle('数码')">
        <span class="iconfont icon-shuma"></span>
        <span>数码</span>
      </div>
    </div>
  </div>
</template>

<script>
// import Circles from "@/components/circle/Circle";
//
export default {
  data(){
    return{}
  },
  methods:{
    getCircle(index){
      sessionStorage.setItem('channel',index)
      this.$router.push({
        path:'/channel',
        name:'channel',
      })
    }
  }
}
</script>

<style>
.items {
  z-index: 999;
  opacity:1;
  height: 70px;
  line-height: 50px;
  position: fixed;
  left: 0;
  display: flex;
  justify-items: center;
  width: 100%;
}
.Top .item-one{
  top: 16%;
}
.Top .item-two{
  top: 32%;
}
.Top .item-three{
  top: 48%;
}
.Top .item-four{
  top: 64%;
}
.Top .item-five{
  top: 80%;
}

.items .item{
  flex: 1;
  text-align: center;
  font-size: 16px;
}
.items .item span{
  height: 30px;
}
.items .item .iconfont{
  font-size: 40px;
  display: block;
}
</style>